<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/custom.css" />
	</head>

	<body>
		<div id="app">
			<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="page-header">
						<h2>Router Basic - 01</h2>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-2 col-xs-offset-2">
					<div class="list-group">
						<!--使用指令v-link进行导航-->
						<a class="list-group-item" v-link="{ path: '/home', activeClass: 'active'}">Home</a>
						<a class="list-group-item" v-link="{ path: '/about', activeClass: 'active'}">About</a>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="panel">
						<div class="panel-body">
							<!--用于渲染匹配的组件-->
							<router-view></router-view>
						</div>
					</div>
				</div>
			</div>
			<!--<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="well">
						<p>当前路径：<code>{{$route.path}}</code></p>
						<p>当前参数：<code>{{$route.params | json}}</code></p>
						<p>路由名称：<code>{{$route.name}}</code></p>
						<p>路由查询参数：<code>{{$route.query | json}}</code></p>
						<p>路由匹配项：<code>{{$route.matched | json}}</code></p>
					</div>
				</div>
			</div>-->

			<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="well">
						{{{ msg }}}
					</div>
				</div>
			</div>
		</div>

		<template id="home">
			<div>
				<h1>Home</h1>
				<p>{{msg}}</p>
			</div>
			<div>
				<ul class="nav nav-tabs">
					<li :class="currentPath == '/home/news' ? 'active': ''">
						<a v-link="{ name: 'news'}">News</a>
						<!--具名路径-->
					</li>
					<li :class="currentPath == '/home/Messages' ? 'active': ''">
						<a v-link="{ path: '/home/message'}">Messages</a>
					</li>
					<!--两种写法均可-->
				</ul>
				<router-view></router-view>
			</div>
		</template>

		<template id="news">
			<div>
				<ul>
					<li>
						<a v-link="{ name: 'detail', params: {id: '01'} }">News 01</a>
						<!--具名路径-->
					</li>
					<li>
						<a v-link="{ path: '/home/news/detail/02'}">News 02</a>
					</li>
					<li>
						<a v-link="{ path: '/home/news/detail/03'}">News 03</a>
					</li>
					<!--两种写法均可-->
				</ul>
				<div>
					<router-view></router-view>
				</div>
			</div>
		</template>

		<template id="message">
			<ul>
				<li>Message 01</li>
				<li>Message 02</li>
				<li>Message 03</li>
			</ul>
		</template>

		<template id="newsDetail">
			<div>
				News Detail - {{$route.params.id}} ......
			</div>
		</template>

		<template id="about">
			<div>
				<h1>About</h1>
				<p>This is the tutorial about vue-router.</p>
			</div>
		</template>
	</body>
	<script src="js/vue-v1.0.25.js"></script>
	<script src="js/vue-router-v0.7.13.js"></script>
	<script>
		//路由钩子函数执行顺序演示
		var well = new Vue({
			el: '.well',
			data: {
				msg: '',
				color: '#ff0000'
			},
			methods: {
				setColor: function() {
					this.color = '#' + parseInt(Math.random() * 256).toString(16) +
						parseInt(Math.random() * 256).toString(16) +
						parseInt(Math.random() * 256).toString(16)
				},
				setColoredMessage: function(msg) {
					this.msg += '<p style="color: ' + this.color + '">' + msg + '</p>'
				},
				setTitle: function(title) {
					this.msg = '<h2 style="color: #333">' + title + '</h2>'
				}
			}
		})

		function RouteHelper(name) {
			var route = {
				canReuse: function(transition) {
					well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse')
					return true
				},
				canActivate: function(transition) {
					well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate')
					transition.next()
				},
				activate: function(transition) {
					well.setColoredMessage('执行组件' + name + '的钩子函数:activate')
					transition.next()
				},
				canDeactivate: function(transition) {
					well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate')
					transition.next()
				},
				deactivate: function(transition) {
					well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate')
					transition.next()
				},
				data: function(transition) {
					well.setColoredMessage('执行组件' + name + '的钩子函数:data')
					transition.next()
				}
			}
			return route;
		}

		/* 创建组件构造器  */
		var Home = Vue.extend({
			template: '#home',
			data: function() {
				return {
					msg: 'Hello, vue router!',
					currentPath: '',
					path: ''
				}
			},
			route: {
				data: function(transition) {
					transition.next({
						currentPath: transition.to.path
					})
				}
			},
			route: RouteHelper('Home')
		})

		var News = Vue.extend({
			template: '#news',
			route: RouteHelper('News')
		})

		var Message = Vue.extend({
			template: '#message',
			route: RouteHelper('Message')
		})

		var NewsDetail = Vue.extend({
			template: '#newsDetail',
			route: RouteHelper('NewsDetail')
		})

		var About = Vue.extend({
			template: '#about',
			route: RouteHelper('About')
		})

		/* 创建路由器  */
		var router = new VueRouter()
		//		ps:vue1.0写法创建路由器写在映射路由之前否则会报没有找到map这个函数

		/* 创建路由映射  */
		router.map({
			'/home': {
				component: Home,
				//配置子路由
				subRoutes: {
					'/news': {
						name: 'news',
						component: News,
						//配置子路由
						subRoutes: {
							'detail/:id': {
								name: 'detail',
								component: NewsDetail
							}
						}
					},
					'/message': {
						component: Message
					}
				}
			},
			'/about': {
				component: About
			}
		})
		//默认显示渲染哪个组件
		router.redirect({
			'/': '/home'
		})

		router.beforeEach(function(transition) {
			well.setColor()
			well.setTitle('跳转路径<span class="text-danger">[from = ' + transition.from.path + '], [to = ' + transition.to.path + ']</span>')
			well.setColoredMessage('执行router的全局函数:beforeEach')
			transition.next()
		})

		router.afterEach(function(transition) {
			well.setColoredMessage('执行router的全局函数:afterEach')
		})

		/* 启动路由  */
		var App = Vue.extend({})
		router.start(App, '#app')

		//(自己理解)JavaScriptps流程:1,创建组件：创建单页面应用需要渲染的组件
		//			                2,创建路由：创建VueRouter实例
		//				            3,映射路由：调用VueRouter实例的map方法
		//			                4,启动路由：调用VueRouter实例的start方法
		//          HTML流程:1,使用v-link指令
		//                   2,使用<router-view>标签

		//          vue版本和vue-router版本必须是1.x的
	</script>

</html>